<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>filters</title>
  </head>
  <body>
    <!-- 
    1. <filter> 标签用来定义 SVG 滤镜效果。
    2. filter 有很多可选的过滤器
      - <feBlend>
      - <feColorMatrix>
      - <feComponentTransfer>
      - <feComposite>
      - <feConvolveMatrix>
      - <feDiffuseLighting>
      - <feDisplacementMap>
      - <feDistantLight>
      - <feDropShadow>
      - <feFlood>
      - <feGaussianBlur>
      - <feImage>
      - <feMerge>
      - <feMergeNode>
      - <feMorphology>
      - <feOffset>
      - <fePointLight>
      - <feSpecularLighting>
      - <feSpotLight>
      - <feTile>
      - <feTurbulence>
  -->
    <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="f1" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
        </filter>
      </defs>
      <rect width="90" height="90" fill="red" filter="url(#f1)" />
    </svg>
  </body>
</html>
